<template>
  <div>
    <div class="header">
      选择城市 -<i class="iconfont icon-cuowu" @click="goback"></i>
    </div>
    <van-index-bar class="box">
      <van-index-anchor
        :index="item.index"
        v-for="item in cities"
        :key="item.index"
      >
        <b>{{ item.index }}</b>
        <van-cell
          :title="subitem.name"
          v-for="subitem in item.list"
          :key="subitem.cityId"
          @click="back(subitem.name,subitem.cityId)"  
        /> 
      </van-index-anchor>  
      
    </van-index-bar>
  </div>
</template>
<script>
import axios from "axios";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      cities: [],
    };
  },
  computed: {
    getLetters: function () {
      let letters = [];
      for (let index = 65; index < 91; index++) {
        letters.push(String.fromCharCode(index));
      }
      return letters;
    },
  },
  mounted() {
    axios({
      url: "https://m.maizuo.com/gateway?k=9086589",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"16278723596246626205106177","bc":"440100"}',
        "X-Host": "mall.film-ticket.city.list",
      },
    }).then((res) => {
      this.handleDataList(res.data.data.cities);
    });
  },
  methods: {
       ...mapActions("data", ["changeCity",'getCityId']),  
    goback() {
      this.$router.go(-1);
    },
    handleDataList(datalist) {
      let that = this;
      for (let index = 0; index < this.getLetters.length; index++) {
        let arr = datalist.filter(function (item) {
          return item.pinyin.charAt(0) === that.getLetters[index].toLowerCase();
        });
        that.cities.push({
          index: that.getLetters[index],
          list: arr,
        });
      }
      console.log(that.cities);
    },
     
    back(it,id){  
       this.changeCity(it)
       this.getCityId(id)
        this.$router.go(-1)
    },
   
  },
};
</script>
<style  scoped>
.header {
  width: 100%;
  position: fixed;
  top: 0;
  height: 0.5rem;
  border-bottom: 1px solid #ccc;
  font-size: 0.2rem;
  text-align: center;
  line-height: 0.5rem;
  z-index: 10;
  background-color: white;
}
.header .icon-cuowu {
  float: left;
  font-size: 0.3rem;
  margin-left: 0.15rem;
}
.box {
  margin-top: 0.5rem;
}
</style>